<template>
<div :class="[$style.container]">
<div :class="[$style.header]">
  <span>收藏分组</span>
  <el-link :underline="false" type="primary" @click="onCreate"><i class="el-icon-plus"></i></el-link>
</div>
<div :class="[$style.body]" v-loading="loading">
  <ul :class="[$style.list]">
    <li :class="[$style.item, selectedCls(row)]" v-for="row in items" :key="row.id" @click="onSelect(row)">
      <span>{{row.name}}</span>
      <span>
        <span class="mr-3 text-secondary">{{row.num}}</span>
        <el-dropdown>
          <el-link :underline="false" :disabled="row.source === 'system'"><i class="el-icon-more"></i></el-link>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item @click.native="onEdit(row)">编辑</el-dropdown-item>
            <el-dropdown-item @click.native="onDelete(row)"><span class="text-error">删除</span></el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </span>
    </li>
  </ul>
</div>
<star-group-edit-modal ref="sgem"></star-group-edit-modal>
</div>
</template>

<script lang="ts">

import { Vue, Component, Provide, Watch, Ref, Prop, Inject, Emit } from 'vue-property-decorator'
import StarGroupEditModal from './components/star-group-edit-modal/index.vue'
import { queryGroups } from '@/api/star'

const sameRow = (r1: any, r2: any) => {
  return r1 === r2 || (!!r1?.id && r1?.id === r2?.id)
}

@Component({
  components: { StarGroupEditModal }
})
export default class StarMenu extends Vue {
  @Prop() current!: any

  @Emit('update:current') updateCurrent (current: any) {}

  @Ref() sgem!: StarGroupEditModal

  items: any[] = []

  loading = false

  selectedCls (row: any) {
    return sameRow(this.current, row) ? this.$style.selected : ''
  }

  onSelect (row: any) {
    this.updateCurrent(row)
  }

  onDelete (row: any) {
    this.$confirm('确认删除该分组, 删除后不可恢复。', '删除分组', {
      confirmButtonText: '删 除',
      cancelButtonText: '取 消',
      confirmButtonClass: 'el-button--danger',
      type: 'error'
    }).then(() => {
      const idx = this.items.findIndex(v => sameRow(row, v))
      if (idx >= 0) this.items.splice(idx, 1)
      if (sameRow(row, this.current)) this.onSelect(this.items[0] || null)
      this.$message.success('已删除')
    }).catch(() => {
      // ignore
    })
  }

  onEdit (row: any) {
    this.sgem.open(row).then((data) => {
      Object.assign(row, data)
      this.$message.success('已更新')
    }).catch(() => {
      // ignore
    })
  }

  onCreate () {
    this.sgem.open().then((data) => {
      this.$message.success('已创建')
      this.loadData()
    }).catch(() => {
      // ignore
    })
  }

  loadData () {
    this.loading = true
    queryGroups().then(data => {
      this.items = data || []
      if (this.items[0]) this.onSelect(this.items[0])
    }).finally(() => {
      this.loading = false
    })
  }

  created () {
    this.loadData()
  }

  $style!: any
}
</script>

<style lang="scss" module>
@import "~@/styles/vars.scss";

.container {
  background-color: #fff;
  border-right: solid 1px $border-split-color;
}

.header {
  height: 36px;
  border-bottom: 1px solid $border-split-color;
  display: flex;
  padding: 0 8px;
  justify-content: space-between;
  align-items: center;
}

.body {
  height: calc(100vh - 48px - 40px - 38px);
  overflow: auto;
}

.list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.item {
  height: 36px;
  border-radius: 2px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 8px;

  &:hover {
    background-color: $bg-body-color;
    cursor: pointer;
  }

  &.selected {
    background-color: $bg-body-color;
  }
}
</style>
